import { parse } from 'querystring';
/* eslint no-useless-escape:0 import/prefer-default-export:0 */
const nums = [
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'J',
  'K',
  'L',
  'M',
  'N',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z',
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'j',
  'k',
  'm',
  'n',
  'p',
  'q',
  'r',
  's',
  't',
  'u',
  'v',
  'w',
  'x',
  'y',
  'z',
];

const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
export const isUrl = (path) => reg.test(path);
export const isAntDesignPro = () => {
  if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') {
    return true;
  }

  return window.location.hostname === 'preview.pro.ant.design';
}; // 给官方演示站点用，用于关闭真实开发环境不需要使用的特性

export const isAntDesignProOrDev = () => {
  const { NODE_ENV } = process.env;

  if (NODE_ENV === 'development') {
    return true;
  }

  return isAntDesignPro();
};
export const getPageQuery = () => parse(window.location.href.split('?')[1]);

// 随机线
const drawline = (canvas, context) => {
  context.moveTo(
    Math.floor(Math.random() * canvas.width),
    Math.floor(Math.random() * canvas.height),
  ); // 随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
  context.lineTo(
    Math.floor(Math.random() * canvas.width),
    Math.floor(Math.random() * canvas.height),
  ); // 随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
  context.lineWidth = 0.5; // 随机线宽
  context.strokeStyle = 'rgba(50,50,50,0.3)'; // 随机线描边属性
  context.stroke(); // 描边，即起点描到终点
};

// 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
const drawDot = (canvas, context) => {
  const px = Math.floor(Math.random() * canvas.width);
  const py = Math.floor(Math.random() * canvas.height);
  context.moveTo(px, py);
  context.lineTo(px + 1, py + 1);
  context.lineWidth = 0.2;
  context.stroke();
};

// 绘制图片
const convertCanvasToImage = (canvas) => {
  document.getElementById('verifyCanvas').style.display = 'none';
  const image = document.getElementById('code_img');
  image.src = canvas.toDataURL('image/png');
  return image;
};

// 生成验证码
export const drawCode = () => {
  const canvas = document.getElementById('verifyCanvas'); // 获取HTML端画布
  const context = canvas.getContext('2d'); // 获取画布2D上下文
  canvas.width = canvas.width;
  context.fillStyle = 'cornflowerblue'; // 画布填充色
  context.fillRect(0, 0, canvas.width, canvas.height);
  // 创建渐变
  const gradient = context.createLinearGradient(0, 0, canvas.width, 0);
  gradient.addColorStop('0', 'magenta');
  gradient.addColorStop('0.5', 'blue');
  gradient.addColorStop('1.0', 'red');
  // 清空画布
  context.fillStyle = gradient; // 设置字体颜色
  context.font = '25px Arial'; // 设置字体
  const rand = new Array();
  const x = new Array();
  const y = new Array();
  for (let i = 0; i < 4; i += 1) {
    rand[i] = nums[Math.floor(Math.random() * nums.length)];
    x[i] = i * 16 + 10;
    y[i] = Math.random() * 20 + 20;
    context.fillText(rand[i], x[i], y[i]);
  }
  // console.log(rand);
  // 画3条随机线
  for (let i = 0; i < 5; i += 1) {
    drawline(canvas, context);
  }

  // 画30个随机点
  for (let i = 0; i < 30; i += 1) {
    drawDot(canvas, context);
  }
  convertCanvasToImage(canvas);
  const newRand = rand.join('').toUpperCase();
  // console.log(newRand);
  sessionStorage.setItem('CODE', newRand);
  return newRand
};

// 验证码
export function Verification(rule, value, callback) {
  if (!value) {
    callback('请输入验证码');
    return;
  }
  if (value.toLowerCase() !== sessionStorage.getItem('CODE').toLowerCase()) {
    callback('验证码错误');
  } else {
    callback();
  }
}
